<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="VIN:" prop="vin">
          <el-input
            v-model="formModel.vin"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="供应商编码:" prop="supplierNo">
          <el-input
            v-model="formModel.supplierNo"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="追溯代码:" prop="partTrackNo">
          <el-input
            v-model="formModel.partTrackNo"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="物料编码:" prop="materialNo">
          <el-input
            v-model="formModel.materialNo"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="物料追溯条码:" prop="scanTrackNo">
          <el-input
            v-model="formModel.scanTrackNo"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="时间范围:" prop="beginTime">
          <el-date-picker
            v-model="dateRange"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="未绑定:" prop="unBind">
          <el-switch
            v-model="formModel.unBind"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button
              v-if="hasPermission('keyPartTrack_select')"
              type="primary"
              plain
              @click="queryList(false)"
            >查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h3>已绑定追溯件:</h3>
    <hey-table ref="table" :table-data="tableData" :columns="columns" />
    <h3>未绑定追溯件:</h3>
    <hey-table ref="unbindTable" :table-data="unbindTableData" :columns="unbindColumns" :auto-width="false" />
  </div>
</template>

<script>

export default {
  name: 'KeyPartTrackList',
  props: {},
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 日期范围
      dateRange: [],
      tableData: [],
      unbindTableData: [],
      // 查询条件
      formModel: {
        vin: '',
        supplierNo: '',
        partTrackNo: '',
        materialNo: '',
        scanTrackNo: '',
        beginTime: '',
        endTime: '',
        unBind: false
      },
      columns: [
        { title: 'VIN号', key: 'vin' },
        { title: '供应商编码', key: 'supplierNo' },
        { title: '追溯代码', key: 'partTrackNo' },
        { title: '追溯组件号', key: 'groupNumber' },
        { title: '物料编码', key: 'materialNo' },
        { title: '物料追溯条码', key: 'scanTrackNo' },
        { title: '追溯工位代码', key: 'ulocNo' },
        { title: '前中后标记', key: 'locationTab', clcd: 'location_tab' },
        { title: '环保件标记', key: 'environmentTag', clcd: 'ind_cd' },
        { title: '对称件标记', key: 'symmetricalPartTab', clcd: 'ind_cd' }
      ],
      unbindColumns: [
        { title: '工厂代码', key: 'plantNo' },
        { title: '追溯工位代码', key: 'ulocNo' },
        { title: '物料编码', key: 'materialNo' },
        { title: '追溯代码', key: 'partTrackNo' },
        { title: '追溯组件号', key: 'groupNumber' },
        { title: '前中后标记', key: 'locationTab', clcd: 'location_tab' },
        { title: '环保件标记', key: 'environmentTag', clcd: 'ind_cd' },
        { title: '对称件标记', key: 'symmetricalPartTab', clcd: 'ind_cd' }
      ]
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    queryList() {
      if (this.formModel.unBind === true) {
        if (this.formModel.vin !== '') {
          console.log(this.formModel)
          // 查询未绑定追溯件列表
          this.$refs.unbindTable.query('/orderQasKeyPartTrack/listUnbindKeyPart', this.formModel, '', false)
        } else {
          this.$Message.info('请输入vin查询未绑定追溯件!')
          return false
        }
      }
      if (this.dateRange != null && this.dateRange !== '') {
        this.formModel.beginTime = this.dateRange[0]
        this.formModel.endTime = this.dateRange[1]
      } else {
        this.formModel.beginTime = ''
        this.formModel.endTime = ''
      }
      // 查询绑定追溯件记录列表
      this.$refs.table.query('/keyPartTrack/pageKeyPartTrack', this.formModel, '', false)
    }
  }
}
</script>
